<template>
  <div>
    <router-view/>
    <div class="tab-position">
    <ul class="tabs">
      <li @click="changeTabs('home')">
        <div class="icon">
          <div class="icon-home" :class="{active: activeTab == 'home'}"></div>  
        </div>
        <div :class="{active: activeTab == 'home'}">首页</div>
      </li>
      <li @click="changeTabs('discover')">
        <div class="icon">
          <div class="icon-discover" :class="{active: activeTab == 'discover'}"></div>  
        </div>
        <div :class="{active: activeTab == 'discover'}">发现</div>
      </li>
      <li @click="changeTabs('person')">
        <div class="icon">
          <div class="icon-person" :class="{active: activeTab == 'person'}"></div>  
        </div>
        <div :class="{active: activeTab == 'person'}">我的</div>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabs',
  data () {
    return {
      activeTab: 'home'
    }
  },
  methods: {
    changeTabs: function(desti){
      if(desti == "home"){
        localStorage.removeItem('activeTab');
      }
      this.activeTab = desti;
      this.$router.push({name: desti});
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab-position {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    z-index: 200;
    background: #fff;
  }
	.tabs {
		width: 100%;
		height: 44px;
		display	: flex;
		justify-content: flex-start;
		align-items: center;
		&>li {
			width: 33.333%;
			height: 44px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&>div {
				width: 100%;
				height: 19px;
        line-height: 19px;
        text-align: center;
        font-size: 10px;
        color: #999;
        &.active {
          color: #4C5B71;
        }
        &.icon {
          display: flex;
          justify-content: center;
          align-items: center;
          &>div{
            width: 25px;
            height: 25px;
            background: url('../assets/img/tabs/tabs-icon.png') no-repeat 0 0;
            background-size: 800%;
          }
          & .icon-home {
            background-position: 0 0;
            &.active {
              background-position: 57% 0;
            }
          }
          & .icon-discover {
            background-position: 15% 0;
            &.active {
              background-position: 72% 0;
            }
          }
          & .icon-person {
            background-position: 43% 0;
            &.active {
              background-position: 100% 0;
            }
          }
        }
			}
		}
	}
</style>